<template>
    <el-table
      :data="roleList"
      style="width: 100%"  
    >
      <el-table-column
        prop="rolename"
        label="角色名称"
        min-width="180">
      </el-table-column>
      <el-table-column
        prop="menus"
        label="角色权限"
        min-width="180">
      </el-table-column>
      <el-table-column
        prop="status"
        label="状态"
        min-width="180" v-slot="props">
        <template>
          <el-button v-if="props.row.status == 1" type="success" size="mini" plain>正常</el-button>
          <el-button v-if="props.row.status == 0" type="danger" size="mini" plain>禁用</el-button>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        min-width="180" v-slot="props">
        <template>
          <el-button @click="updateRole(props.row)" icon="el-icon-edit" type="success" size="mini" circle></el-button>
          <el-button @click="delRole(props.row.id)" icon="el-icon-delete" type="danger" size="mini" circle></el-button>
        </template>  
      </el-table-column>
    </el-table>
</template>

<script>
import vm from '../../vm/vm'
export default {
    props:["roleList"],
    data() {
      return {
          
      }
    },
    methods:{
      updateRole(row){
        //打开模态框
        vm.$emit("sendData",row)
        //填充数据
      },
      delRole(id){
        this.$http.post("/roledelete",{id:id}).then(
          res => {
              console.log(res)
              //刷新列表
              this.$emit("updateRole")
          }
        )
      }
    }
    
}
</script>

<style>

</style>